<template>
  <div class="root-container" v-loading="isLoading">
    <el-alert type="warning" :closable="false" style="padding: 12px">
      <template #title>
        <div style="font-size: 14px">
          <!-- <el-icon><InfoFilled /></el-icon> -->
          <span> 关闭数据更新将会：</span>
        </div>
      </template>
      <div style="padding-left: 12px">
        <ol>
          <li>
            影响“扇区信息”以及“打卡数据”功能，导致扇区、小时统计、扇区历史数据停止更新；
          </li>
          <li>
            影响“流量状态”中的当前扇区数据以及扇区记录，导致数据查询功能中扇区错误；
          </li>
          <li>修改服务端参数，除影响数据更新和记录外，将会同步所有席位。</li>
        </ol>
      </div>
    </el-alert>

    <el-divider />
    <el-form label-width="90px">
      <el-form-item label="网络状态">
        <el-text v-if="isSeatAvailable" type="success">
          <el-icon><CircleCheckFilled /></el-icon>
          <span>已连接</span>
        </el-text>
        <el-text v-else type="danger">
          <el-icon><CircleCloseFilled /></el-icon>
          <span>已断开</span>
        </el-text>
      </el-form-item>
      <el-form-item label="数据更新">
        <el-text v-if="isServiceAvailable" type="success">
          <el-icon><CircleCheckFilled /></el-icon>
          <span>已开启</span>
        </el-text>
        <el-text v-else type="danger">
          <el-icon><CircleCloseFilled /></el-icon>
          <span>已关闭</span>
        </el-text>
        <el-divider direction="vertical" />
        <el-button
          v-if="isServiceAvailable"
          type="warning"
          size="small"
          @click="handleToggle"
          disabled
        >
          <el-icon><SwitchButton /></el-icon>
          <span>关闭数据更新</span>
        </el-button>
        <span v-else>
          <el-button type="primary" size="small" @click="handleToggle" disabled>
            <el-icon><SwitchButton /></el-icon>
            <span>开启数据更新</span>
          </el-button>
          <!-- <el-divider direction="vertical" /> -->
          <el-button
            type="primary"
            size="small"
            @click="handleOnce"
            :disabled="true || inNecessary"
          >
            <el-icon><Pointer /></el-icon>
            <span>单次数据更新</span>
          </el-button>
          <el-text
            v-if="inNecessary"
            type="info"
            size="small"
            style="margin-left: 12px"
          >
            (当前没有更新的必要)
          </el-text>
        </span>
      </el-form-item>
      <el-form-item label="更新时间">
        <el-tag>
          终端
          {{ ver.tma }}
          分钟前
        </el-tag>
        <el-divider direction="vertical" />
        <el-tag>
          区管
          {{ ver.acc }}
          分钟前
        </el-tag>
        <el-divider direction="vertical" />
        <el-tag>
          塔台
          {{ ver.twr }}
          分钟前
        </el-tag>
      </el-form-item>
      <el-form-item label="原始数据">
        <div class="root-code-container">
          <div class="code-container">
            <pre>&emsp;//&nbsp;终端数据</pre>
            <el-scrollbar :max-height="codeHeight">
              <pre>{{ seatStore.seatStatusFull }}</pre>
            </el-scrollbar>
          </div>
          <div class="code-container">
            <pre>&emsp;//&nbsp;区管数据</pre>
            <el-scrollbar :max-height="codeHeight">
              <pre>{{ seatStore.seatStatusACCFull }}</pre>
            </el-scrollbar>
          </div>
          <div class="code-container">
            <pre>&emsp;//&nbsp;塔台数据</pre>
            <el-scrollbar :max-height="codeHeight">
              <pre>{{ seatStore.seatStatusTWRFull }}</pre>
            </el-scrollbar>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage, ElDivider } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const codeHeight = ref("calc(100vh - 480px)");

const isServiceAvailable = computed(() => seatStore.isServiceAvailable);
const isSeatAvailable = computed(() => seatStore.isSeatAvailable);

const ver = computed(() => ({
  tma: dayjs().diff(seatStore.seatStatusVersion, "minute"),
  acc: dayjs().diff(seatStore.seatStatusACCVersion, "minute"),
  twr: dayjs().diff(seatStore.seatStatusTWRVersion, "minute"),
}));

const inNecessary = computed(() =>
  isServiceAvailable.value
    ? ver.value.tma < 5 && ver.value.acc < 5 && ver.value.twr < 5
    : ver.value.tma < 15 && ver.value.acc < 15 && ver.value.twr < 15
);

const handleToggle = (val, refresh = true, notify = true) => {
  return new Promise((resolve, reject) => {
    let param = {
      type: "variable",
      name: "STOP_ATCOS",
      value: val === 0 || val === 1 ? val : isServiceAvailable.value ? 1 : 0,
    };
    axios
      .post("api/global_parameter_set.php", param)
      .then((res) => {
        if (res.data) {
          refresh ? seatStore.requestData(true) : null;
          notify ? ElMessage.success("已修改设置") : null;
          resolve();
        } else {
          ElMessage.warning("出错了");
          reject();
        }
      })
      .catch((err) => {
        ElMessage.error("出错了");
        reject(err);
      });
  });
};

const isLoading = ref(false);
const loadingCount = ref(0);
const loadingSuccess = ref(0);
const loadingFailed = ref(0);
const handleOnce = () => {
  isLoading.value = true;
  loadingCount.value = 0;
  loadingSuccess.value = 0;
  loadingFailed.value = 0;
  handleToggle(0, false, false)
    .then(() => {
      seatStore
        .reloadSeatStatus(true)
        .then(() => loadingCheck(1))
        .catch(() => loadingCheck(0));
      seatStore
        .refreshSeatStatusACC(true)
        .then(() => loadingCheck(1))
        .catch(() => loadingCheck(0));
      seatStore
        .refreshSeatStatusTWR(true)
        .then(() => loadingCheck(1))
        .catch(() => loadingCheck(0));
    })
    .catch(() => (isLoading.value = false));
  // console.log("handleOnce", err);
};
const loadingCheck = (success = 1) => {
  loadingCount.value++;
  success == 1 ? loadingSuccess.value++ : loadingFailed.value++;
  if (loadingCount.value == 3) {
    handleToggle(1, true, false)
      .then(() => (isLoading.value = false))
      .catch(() => (isLoading.value = false));
    // if (loadingSuccess == 3) {
    //   ElMessage.success("已更新");
    // } else {
    //   ElMessage.error("更新失败");
    // }
  }
};
</script>

<style scoped>
.root-container {
  width: 100%;
  height: 100%;
  padding: 18px;
}

.root-code-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.root-code-container > * {
  margin-right: 18px;
}

.root-code-container > last-child {
  margin-right: 0;
}

.code-container {
  border-radius: 6px;
  padding: 10px 1px 10px 5px;
  transition: all 0.75s ease;
  background-color: #8881;
  min-width: 300px;
  line-height: 20px;
  opacity: 0.5;
}

.code-container:hover {
  background-color: #8882;
  line-height: 20px;
  opacity: 1;
  transform: scale(1.025);
}
</style>
